/**
* 功能描述: 基础复选框组样式Demo
* @author 赵常畅
* @date 2022/9/22 14:13
* @version 1.0
*/
<template>
  <div class="groupBox">
    <h5>基础</h5>
    <div class="yw-checkbox-group">
      <label class="yw-checkbox-wrapper yw-checkbox-group-item">
      <span class="yw-checkbox">
        <input name="checkboxgroup" type="checkbox" class="yw-checkbox-input" value="Apple">
        <span class="yw-checkbox-inner"></span>
      </span>
      </label>
      <label class="yw-checkbox-wrapper yw-checkbox-group-item">
      <span class="yw-checkbox">
        <input name="checkboxgroup" type="checkbox" class="yw-checkbox-input" value="Pear">
        <span class="yw-checkbox-inner"></span>
      </span>
      </label>
      <label class="yw-checkbox-wrapper yw-checkbox-group-item">
      <span class="yw-checkbox">
        <input name="checkboxgroup" type="checkbox" class="yw-checkbox-input" value="Orange">
        <span class="yw-checkbox-inner"></span>
      </span>
      </label>
    </div>
  </div>
  <div class="groupBox">
    <h5>选中</h5>
    <div class="yw-checkbox-group">
      <label class="yw-checkbox-wrapper yw-checkbox-wrapper-checked yw-checkbox-group-item">
      <span class="yw-checkbox yw-checkbox-checked">
        <input type="checkbox" class="yw-checkbox-input" value="Apple">
        <span class="yw-checkbox-inner"></span>
      </span>
      </label>
      <label class="yw-checkbox-wrapper yw-checkbox-group-item">
      <span class="yw-checkbox">
        <input type="checkbox" class="yw-checkbox-input" value="Pear">
        <span class="yw-checkbox-inner"></span>
      </span>
      </label>
      <label class="yw-checkbox-wrapper yw-checkbox-group-item">
      <span class="yw-checkbox">
        <input type="checkbox" class="yw-checkbox-input" value="Orange">
        <span class="yw-checkbox-inner"></span>
      </span>
      </label>
    </div>
  </div>
  <div class="groupBox">
    <h5>禁用</h5>
    <div class="yw-checkbox-group">
      <label class="yw-checkbox-wrapper yw-checkbox-wrapper-checked yw-checkbox-wrapper-disabled yw-checkbox-group-item">
      <span class="yw-checkbox yw-checkbox-checked yw-checkbox-disabled">
        <input type="checkbox" disabled="" class="yw-checkbox-input" value="Apple">
        <span class="yw-checkbox-inner"></span>
      </span>
      </label>
      <label class="yw-checkbox-wrapper yw-checkbox-wrapper-disabled yw-checkbox-group-item">
      <span class="yw-checkbox yw-checkbox-disabled">
        <input type="checkbox" disabled="" class="yw-checkbox-input" value="Pear">
        <span class="yw-checkbox-inner"></span>
      </span>
      </label>
      <label class="yw-checkbox-wrapper yw-checkbox-wrapper-disabled yw-checkbox-group-item">
      <span class="yw-checkbox yw-checkbox-disabled">
        <input type="checkbox" disabled="" class="yw-checkbox-input" value="Orange">
        <span class="yw-checkbox-inner"></span>
      </span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>
.groupBox {
  margin: 10px;
}
</style>